<template>
    <div class="editViews">
        <navbar></navbar>

        <div class="upload">
            <van-uploader class="uploading" :after-read="afterRead" preview-size="100vw"/>
            <detail-bar left="头像">
                <img :src="user.img" slot="right" v-if="user.img">
                <img src="../../assets/default_img.jpg" slot="right" v-else>
            </detail-bar>
        </div>
        <detail-bar left="用户名">
            <a href="javascript:;" slot="right">{{user.name}}</a>
        </detail-bar>
        <detail-bar left="性别" @bannerClick="genderClick">
            <a slot="right" v-if="user.gender">{{user.gender}}</a>
        </detail-bar>
        <detail-bar left="个性签名" @bannerClick="textareaClick"><a slot="right"
                                                                v-if="user.signature">{{user.signature}}</a>
        </detail-bar>
        <div class="editback" @click="$router.back()">返回个人中心</div>

        <van-action-sheet v-model="show" cancel-text="取消" :actions="actions" @select="genderSelect"/>
        <van-dialog
                v-model="textShow"
                title="个签"
                show-cancel-button
                @confirm="textareaConfirm"
                @cancel="signature = ''"
        >
            <van-field v-model="signature" type="textarea" autofocus/>
        </van-dialog>
    </div>
</template>

<script>
    import navbar from "@/components/common/navbar";
    import detailBar from "@/components/UserComponents/detailBar";

    export default {
        components: {navbar, detailBar},
        data() {
            return {
                user: [],
                show: false,
                textShow: false,
                signature: "",
                actions: [{name: '男'}, {name: '女'}]
            }
        },
        mounted() {
            this.refreshData()
        },
        methods: {
            refreshData() {
                this.$http.get("/userinfo").then((res) => {
                    this.user = res.data.data
                    this.$set(this.user, img, this.$http.baseURL + '/' + this.user.img)
                    // this.user.img = this.$http.baseURL + '/' + this.user.img
                    localStorage.setItem("user", JSON.stringify(this.user))
                })
            },
            afterRead(file) {
                const formData = new FormData()
                formData.append("file", file.file)
                this.$http.post("/minio/upload", formData).then((res) => {
                    if (res.data.code == 0) {
                        this.$msg.success(res.data.message)
                        this.user.img = res.data.img
                    } else {
                        this.$msg.fail(res.data.message)
                    }
                    this.refreshData()
                })
            },
            genderClick() {
                this.show = true;
            },
            genderSelect(data) {
                this.$http.get("/updateGender", {params: {gender: data.name}}).then((res) => {
                    this.$msg.success(res.data.message)
                    this.show = false;
                    this.refreshData()
                })
            },
            textareaClick() {
                this.textShow = true;
            },
            textareaConfirm() {
                this.$http.get("/updateSignature", {params: {signature: this.signature}}).then((res) => {
                    this.$msg.success(res.data.message)
                    this.refreshData()
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    img {
        border-radius: 50%;
        height: 12.778vw;
        width: 12.778vw;
    }

    .editViews {
        .upload {
            position: relative;
            overflow: hidden;

            .uploading {
                position: absolute;
                opacity: 0;
            }
        }
    }

    .editViews a {
        color: #333;
    }

    .editback {
        margin-top: 5.556vw;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        color: #999;
        padding: 4.167vw 0;
        font-size: 4vw;
    }
</style>